<template>
  <div class="good_detail">
    <nav-bar :datas="good.navContent" :scrollTop="scrollTop" ref="navbar"></nav-bar>
    <banner ref="banner" :datas="good.banner"></banner>
    <base-info :datas="good.baseInfo"></base-info>
    <service :datas="good.service"></service>
    <d-select :datas="good.select" :baseInfo="good.baseInfo"></d-select>
    <comment :datas="good.comment"></comment>
    <imgs-show class="b_margin" :datas="good.banner" ref="imgsshow"></imgs-show>
    <params :datas="good.params" ref="params">
      <template #title>
        <span>参数详情</span>
      </template>
      <template #img>
        <img
          src="https://s11.mogucdn.com/mlcdn/c45406/210111_0cj866clfibe48lg22e1cc09352bg_650x450.jpg_468x468.webp"
          alt
        />
      </template>
    </params>
    <recommend :datas="good.recommend" ref="recommend"></recommend>
    <action></action>
  </div>
</template>

<script>
import NavBar from "components/private/good_detail/DetailNavBar";
import Banner from "components/private/good_detail/DetailBanner";
import BaseInfo from "components/private/good_detail/DetailBaseInfo";
import Service from "components/private/good_detail/DetailService";
import DSelect from "components/private/good_detail/DetailSelect";
import Comment from "components/private/good_detail/DetailComment";
import ImgsShow from "components/private/good_detail/DetailImgsShow";
import Params from "components/private/good_detail/DetailParams";
import Recommend from "components/private/good_detail/DetailRecommend";
import Action from "components/private/good_detail/DetailAction";

export default {
  name: "GoodDetail",
  data() {
    return {
      good: {
        navContent: {
          good: {
            text: "商品",
            top: 0
          },
          imgs: {
            text: "图文",
            top: 0
          },
          params: {
            text: "参数",
            top: 0
          },
          recommend: {
            text: "推荐",
            top: 0
          }
        },
        banner: null,
        baseInfo: null,
        service: null,
        select: null,
        comment: null,
        params: null,
        recommend: null
      },
      scrollTop: null
    };
  },
  methods: {
    request() {
      if (this.goodId && this.categroyBaseId) {
        this.$axios({
          url: "/querygooddata",
          params: {
            good_id: this.goodId,
            categroybase_id: this.categroyBaseId
          }
        }).then(res => {
          let {
            banner,
            baseinfo,
            service,
            color,
            size,
            guige,
            pinglun,
            pinglun_categroy,
            canshu,
            tuijian
          } = res;
          // console.log(res);
          this.good.banner = banner;
          if (baseinfo) {
            this.good.baseInfo = baseinfo[0];
          }

          this.good.service = service;
          this.good.select = { color, size, guige };
          this.good.comment = { pinglun, pinglun_categroy, color, guige };
          this.good.params = canshu;
          this.good.recommend = tuijian;
        });
      }
    }
  },
  components: {
    NavBar,
    Banner,
    BaseInfo,
    Service,
    DSelect,

    Comment,
    ImgsShow,
    Params,
    Recommend,
    Action
  },
  computed: {
    goodId() {
      return this.$route.params.good_id;
    },
    categroyBaseId() {
      return this.$route.query.categroy_base_id;
    },
    detailScroll() {
      return 0;
    }
  },
  created() {
    window.scrollTo(0, 0);
    // 请求数据
    this.request();
    // 接收DetailRecommend发出来的事件
    this.$bus.$on("detail", () => {
      // 重新请求数据
      this.request();
      // 回到顶部
      window.scrollTo(0, 0);
    });
  },
  mounted() {
    // 图片加载完成时计算高度
    this.$bus.$on("loadimg", () => {
      if (this.$refs.imgsshow) {
        // console.log(this.$refs.imgsshow.$el.offsetTop - 45);
        this.good.navContent.good.top = this.$refs.banner.$el.offsetTop - 45;
        this.good.navContent.imgs.top = this.$refs.imgsshow.$el.offsetTop - 45;
        this.good.navContent.params.top = this.$refs.params.$el.offsetTop - 45;
        this.good.navContent.recommend.top =
          this.$refs.recommend.$el.offsetTop - 45;
      }
    });
    // 改变浏览器窗口时计算高度
    window.onresize = () => {
      this.$bus.$emit("loadimg");
    };
  },
  // 组件守卫
  // 返回时还是detail组件，不会自动执行created钩子
  beforeRouteUpdate(to, from, next) {
    this.$nextTick(() => {
      this.request();
    });
    window.scrollTo(0, 0);

    next();
  }
};
</script>

<style lang="less" scoped>
.good_detail {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>